<!DOCTYPE html>
<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width" />
    <title>Media Chrome - Microvideo Theme</title>

    <script type="module" src="../../../dist/index.js"></script>
    <script type="module" src="https://cdn.jsdelivr.net/npm/@player.style/microvideo/+esm"></script>

    <style>
      body {
        max-width: 800px;
      }

      /** add styles to prevent CLS (Cumulative Layout Shift) */
      media-theme-microvideo {
        display: block;         /* expands the container if preload=none */
        max-width: 720px;       /* allows the container to shrink if small */
        aspect-ratio: 16 / 9;   /* set container aspect ratio if preload=none */
      }

      label {
        display: block;
      }

      .auto-grid {
        --auto-grid-min-size: 20rem;
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(var(--auto-grid-min-size), 1fr));
        grid-gap: 1rem;
      }
    </style>
  </head>
  <body>
    <!-- The main tag is used to exclude other body content in https://www.media-chrome.org/docs/en/examples -->
    <main>
      <h1>Media Chrome - Microvideo Theme</h1>

      <media-theme-microvideo id="theme">
        <video
          slot="media"
          src="https://stream.mux.com/O6LdRc0112FEJXH00bGsN9Q31yu5EIVHTgjTKRkKtEq1k/high.mp4"
          poster="https://image.mux.com/O6LdRc0112FEJXH00bGsN9Q31yu5EIVHTgjTKRkKtEq1k/thumbnail.jpg?time=56"
          crossorigin="anonymous"
          playsinline
        >
          <track
            label="thumbnails"
            default
            kind="metadata"
            src="https://image.mux.com/O6LdRc0112FEJXH00bGsN9Q31yu5EIVHTgjTKRkKtEq1k/storyboard.vtt"
          />
          <track
            label="English"
            kind="captions"
            srclang="en"
            src="../vtt/en-cc.vtt"
          />
        </video>
      </media-theme-microvideo>
    </main>

    <div class="auto-grid">
      <div>
        <h3>Choose <code>streamtype</code>:</h3>
        <label>
          <input type="radio" name="streamtype" value="on-demand" checked>
          on-demand
        </label>
        <label>
          <input type="radio" name="streamtype" value="live">
          live
        </label>
      </div>

      <div>
        <h3>Choose <code>targetlivewindow</code>:</h3>
        <label>
          <input type="radio" name="targetlivewindow" value="0" checked>
          0
        </label>
        <label>
          <input type="radio" name="targetlivewindow" value="1">
          1
        </label>
      </div>

      <div>
        <h3>Choose <code>controlbarvertical</code>:</h3>
        <label>
          <input type="radio" name="controlbarvertical" value="" checked>
          false
        </label>
        <label>
          <input type="radio" name="controlbarvertical" value="1">
          true
        </label>
      </div>

      <div>
        <h3>Choose <code>controlbarplace</code>:</h3>
        <label>
          <input type="radio" name="controlbarplace" value="start start">
          start start
        </label>
        <label>
          <input type="radio" name="controlbarplace" value="start center">
          start center
        </label>
        <label>
          <input type="radio" name="controlbarplace" value="start end">
          start end
        </label>
        <label>
          <input type="radio" name="controlbarplace" value="center start">
          center start
        </label>
        <label>
          <input type="radio" name="controlbarplace" value="center center">
          center center
        </label>
        <label>
          <input type="radio" name="controlbarplace" value="center end">
          center end
        </label>
        <label>
          <input type="radio" name="controlbarplace" value="end start">
          end start
        </label>
        <label>
          <input type="radio" name="controlbarplace" value="end center" checked>
          end center
        </label>
        <label>
          <input type="radio" name="controlbarplace" value="end end">
          end end
        </label>
      </div>
    </div>

    <script>
      const search = new URLSearchParams(location.search);
      search.forEach((value, key) => {
        if (key.startsWith('--')) {
          theme.style.setProperty(key, value);
        } else if (value) {
          theme.setAttribute(key, value);
        } else {
          theme.removeAttribute(key);
        }
        document.querySelector(`[name="${key}"][value="${value}"]`).checked = !!value;
      });

      document.addEventListener('change', (e) => {
        const search = new URLSearchParams(location.search);

        if (e.target.name.startsWith('--')) {
          theme.style.setProperty(e.target.name, e.target.value);
          search.set(e.target.name, e.target.value);

        } else if (e.target.value) {
          theme.setAttribute(e.target.name, e.target.value);
          search.set(e.target.name, e.target.value);

        } else {
          theme.removeAttribute(e.target.name);
          search.delete(e.target.name);
        }

        const url = new URL(window.location.href);
        url.search = search;
        history.pushState({}, '', url);
      });
    </script>
  </body>
</html>
